<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../org/angular.min.js"></script>
</head>
<body>
    <div ng-app="vm" ng-controller="ctrl">
        <input type="text" ng-model="color">{{color}}
        <hr>
        <h1 cms hd-color = "{{color}}"></h1>

    </div>
    <script>
        var vm = angular.module('vm',[]);
        vm.directive('cms',[function(){
            return {
                restrict: 'AEC',
                template: '<input type="text" ng-model="color"><br/>{{color}}<br/><span style="color:{{color}}">指令tpl</span>',
                scope: {
                    color:'@hdColor'
                }
            }
        }])
        vm.controller('ctrl',["$scope",function($scope){
            // $scope.name = "hairuil";
            $scope.color = "red"
        }])
    </script>
</body>
</html>